<template>
  <div style="color: #a8c5ed;min-width: 1920px;min-height: 1080px;">
    <div class="bgy-screen-top">
      <div class="top-left">
        <div class="top-logo"></div>
        <div class="bgy-line left"></div>
        <div class="top-logo-zhihui left" v-if="projectDetail.isSsgf === 1"></div>
        <div class="top-logo-shuz left" v-if="projectDetail.isSsgf === 2"></div>
      </div>
      <div class="top-center relative">
        <div class="top-noImg-title"><span ref="projectTitle">智慧工地 · <span>{{currentUser.companyTitle || '集团总部'}}</span></span></div>
        <div class="top-light"></div>
      </div>
      <div class="top-right">
        <span class="t-left mr20">
            <i class="iconfont icon-zu6" style="font-size: 23px" @click="autoHandle(false)" v-if="screenSetting.auto" title="手动播放"></i>
            <i class="iconfont icon-zu6" style="font-size: 23px" @click="autoHandle(true)" v-else title="自动轮播"></i>
        </span>

        <zz-retrieve
          :left="-204"
          :height="372"
          @show="showRetrieve"
          ref="retrieveIndex"
          isCompanyRouter="true"
          :isVideoRouter="true"
          fontSize="25px"
          class="mr20"
          style="margin-left: -5px; line-height: 20px;"
        ></zz-retrieve>

        <!--<zz-history class="mr20"></zz-history>-->

        <span class="t-left mr20" @click="fullScreen" v-if="isFullScreen">
           <i class="iconfont icon-daquanping" title="全屏"></i>
        </span>

        <span class="t-left mr20" @click="exitScreen" v-else>
            <i class="iconfont icon-tuiquanping" title="退出全屏"></i>
          </span>

        <span class="t-left mr20" >
            <i class="iconfont icon-tuichu" @click="quit" title="退出"></i>
        </span>

      </div>
    </div>
    <div class="company-screen">
      <div class="company-screen-top">
        <div class="company-screen-left">
          <zz-frame
            width="100%"
            :height="`612px`">
            <smartMonitor></smartMonitor>
          </zz-frame>
        </div>
        <div class="company-screen-center">
          <zz-frame width="100%" height="70px" class="marquee-text">
            <p class="left" style="width: 130px">主席指示:</p>
            <zz-marquee class="left" :marginRight=400 ref="marquee" :contentList="content" :isStack = false width="740px"></zz-marquee>
          </zz-frame>

          <zz-frame
            width="100%"
            style="overflow: hidden"
            :height="`532px`"
            class="mt10 relative">
            <smartSite></smartSite>
          </zz-frame>
        </div>
        <div class="company-screen-right">
          <zz-frame width="100%" :height="`612px`" style="overflow: hidden">
            <smartManger></smartManger>
          </zz-frame>
        </div>
      </div>
      <div class="company-screen-bottom">
        <zz-frame width="100%" height="330px" style="overflow: hidden">
          <realMonitor></realMonitor>
        </zz-frame>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'home',
    mixins: [mixin],
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        screenSetting: 'getScreenSetting'
      })
    },
    data () {
      return {
        content: [
          '把安全、质量放在首位！',
          '一切不能保证安全质量的施工都要停工！',
          '合法合规、对人好、对社会好。',
          '集团要建立安全文化，所有的行为、想法都要以安全为中心。',
          '建立一个最好的安全体系，按照追求‘零伤亡’的目标去谋划所有的事。'
        ],
        projectDetail: {
          isSsgf: 1
        },
        isFullScreen: true
      }
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid) {
          if (this.currentUser.companyAdmin) {
            this.emitNode()
          }
        }
      }
    },
    mounted () {
      if (!this.projectNode) {
        if (this.currentUser.companyTitle === '' || this.currentUser.companyTitle === '集团总部') {
          this.projectNode = new this.$Node({
            group: `COMPANY_GROUP_${this.currentUser.coId}`,
            mName: this.currentUser.mName
          })
        } else {
          this.projectNode = new this.$Node({
            group: `AREA_GROUP_${this.currentUser.code}`,
            mName: this.currentUser.mName
          })
        }
      }
    },
    components: {
      smartMonitor (reslove) {
        require(['./smartMonitor/index.vue'], reslove)
      },
      smartManger (reslove) {
        require(['./smartManger/manger.vue'], reslove)
      },
      smartSite (reslove) {
        require(['./smartSite/site.vue'], reslove)
      },
      realMonitor (reslove) {
        require(['./realMonitor/realMonitor.vue'], reslove)
      }
    },
    methods: {
      emitNode () {
        this.projectNode.logout()
        if (this.currentUser.companyTitle === '' || this.currentUser.companyTitle === '集团总部') {
          this.projectNode.setOption({
            group: `COMPANY_GROUP_${this.currentUser.coId}`,
            mName: this.currentUser.mName
          })
        } else {
          this.projectNode.setOption({
            group: `AREA_GROUP_${this.currentUser.code}`,
            mName: this.currentUser.mName
          })
        }
      },
      fullScreen () {
        this.$fullScreen()
        this.isFullScreen = false
      },
      exitScreen () {
        this.$fullExit()
        this.isFullScreen = true
      },
      quit () {
        this.projectNode.logout()
        this.$axios({
          method: 'post',
          url: `${this.$site.passportServer}/front/logout.htm`
        }).then(res => {
          this.$store.commit('resetCurrUser')
          this.$router.push({name: 'projectLogin'})
        })
      },
      autoHandle (status) {
        this.$store.commit('editScreenSetting', {auto: status})
      }
    }
  }
</script>

<style scoped lang="scss">
  .marquee-text{
    font-size: 28px;
    font-weight: bolder;
  }
  .company-screen{
    height: 100%;
    min-height: 954px;
    margin-top: 10px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    .company-screen-top{
      width: 100%;
      min-height: 610px;
      display: table;
      .company-screen-left{
        padding-right: 10px;
        width: 463px;
        display: table-cell;
        vertical-align: top;
        height: 100%;
      }
      .company-screen-center{
        display: table-cell;
        vertical-align: top;
        height: 100%;
      }
      .company-screen-right{
        height: 100%;
        padding-left: 10px;
        width: 463px;
        display: table-cell;
        vertical-align: top;
      }
    }
    .company-screen-bottom{
      width: 100%;
      margin-top: 10px
    }

  }
</style>
